// -------------------------------------------
// Misc. utilities & helper class
// -------------------------------------------

.row-hover {
  &:hover {
    background-color: rgba($brand-faded, 60%/100.0%);
  }
}

.clickable-element {
  cursor: pointer;
  @include transition(all 0.3s ease-in);
  
  &:hover {
    @include opacity(0.9);
  }
}

[data-scroll="scroll-state"] {
  // Starts hidden, shows on scroll state active
  &.scroll-state-hidden {
    @include transition(all 0.3s ease-in);
    @include opacity(0);
    z-index: -1;
    
    &.scroll-state-active {
      @include opacity(1);
      z-index: 1;
    }
  }
  
  // Starts shown, hides on scroll state active
  &.scroll-state-shown {
    @include transition(all 0.3s ease-in);
    @include opacity(1);
    
    &.scroll-state-active {
      @include opacity(0);
      z-index: -1;
    }
  }  
}

// Hover styles
.link-effect-underline {
  position: relative;
  
  &:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
  }
  
  &.nav-link:after {
    height: 3px;
  }
  
  &:hover,
  &.active {
    text-decoration: none;
    
    &:after {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
  }
}

.link-effect-slideup {
  overflow: hidden;
  position: relative;

  .nav-link-inner {
    display: inline-block;
    position: relative;
    @include transition(all 0.2s ease-in);
  
    &:after {
      position: absolute;
      top: 200%;
      content: attr(data-title);
      -webkit-transform: translate3d(0,0,0);
      -moz-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
      color: $primary_colour;
      display: block;
    }
  }
  
  &:hover,
  &:focus,
  &.active {
    .nav-link-inner {
      -webkit-transform: translateY(-200%);
      -moz-transform: translateY(-200%);
      transform: translateY(-200%);
    }
  }
}

.hover-grow {
  @include transition(all 0.2s ease);
  &:hover {
    @include scale(1.1);
  }
  
  &.hover-grow-sm:hover {
    @include scale(1.05);
  }
}
